import React,{memo,useState} from 'react';
import "../../../assets/Layout/xiangce.scss"
import { Button, Select, Pagination,Modal,Form,Upload,Input } from 'antd'
import ImgItem from './mode/imgItem'
import { InboxOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
const { Dragger } = Upload;
const props: UploadProps = {
  name: 'file',
  multiple: true,
  action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
  accept:"image/png, image/jpeg,image/gif",
  onChange(info) {
    const { status } = info.file;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
  onDrop(e) {
    console.log('Dropped files', e.dataTransfer.files);
  },
};

function XiangCe(){
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isModalOpen2, setIsModalOpen2] = useState(false);
  let imgArr = [{id:1},{id:1},{id:1},{id:1},{id:1},{id:1},{id:1},{id:1},{id:1},{id:1},{id:1},{id:1},{id:1},{id:1},{id:1},{id:1},{id:1},{id:1}]
 let ImgItemDom = (
   imgArr.map((cxt,i)=><ImgItem key={i}/>)
 )
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleOk2 = () => {
    setIsModalOpen2(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const handleCancel2 = () => {
    setIsModalOpen2(false);
  };
  const beforeUpload = (file: FileType) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  };

  return <>
     <div className="xiangce-main">
       <div className="xc-top">
         <Button onClick={showModal} type="primary"><i className="iconfont mt-tupianshangchuan"></i>上传图片</Button>
         <Button onClick={()=>setIsModalOpen2(true)} ><i className="iconfont mt-xiangce"></i>创建相册</Button>
       </div>
       <div className="cx-main">
         {ImgItemDom}
       </div>
       <div className="pagBox">
         <Pagination align="center" size="small" showSizeChanger showQuickJumper total={50} />
       </div>
     </div>

    <Modal title="上传图片" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
       <Form>
         <Form.Item
           label="选择相册"
           name="username"
           rules={[{ required: true, message: '必须选择相册' }]}
         >
           <Select
             showSearch
             placeholder="请选择相册"
             optionFilterProp="label"
             value="1"
             options={[
               {
                 value: '1',
                 label: '默认相册',
               },
             ]}
           />
         </Form.Item>

         <Form.Item
           label="上传图片"
           name="username"
           rules={[{ required: true, message: '请上传图片' }]}
         >
           <Dragger {...props}>
             <p className="ant-upload-drag-icon">
               <InboxOutlined />
             </p>
             <p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
             <p className="ant-upload-hint">
               支持上传JPG、PNG、GIF等图片格式上传
             </p>
           </Dragger>

         </Form.Item>

       </Form>

    </Modal>
    <Modal title="创建相册" open={isModalOpen2} onOk={handleOk2} onCancel={handleCancel2}>
      <Form>
        <Form.Item
          label="相册名称"
          name="username"
          rules={[{ required: true, message: '必须填写相册名称' }]}
        >
          <Input placeholder="请填写相册名称" />
        </Form.Item>


      </Form>

    </Modal>
  </>

}

export  default memo(XiangCe)
